<!-- src/components/CheckboxRadio.vue -->
<template>
  <div class="checkbox-radio">
    <h3>复选框</h3>
    <label> <input type="checkbox" v-model="hobbies" value="读书" /> 读书 </label>
    <label> <input type="checkbox" v-model="hobbies" value="游泳" /> 游泳 </label>
    <label> <input type="checkbox" v-model="hobbies" value="编程" /> 编程 </label>
    <p>爱好：{{ hobbies.join(', ') }}</p>

    <h3>单选框</h3>
    <label> <input type="radio" v-model="gender" value="男" /> 男 </label>
    <label> <input type="radio" v-model="gender" value="女" /> 女 </label>
    <p>性别：{{ gender }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const hobbies = ref([])
const gender = ref('男')
</script>

<style scoped>
.checkbox-radio {
  margin: 16px 0;
}
label {
  margin-right: 16px;
}
</style>
